<template>
  <view class="phxx-item">
    <view class="phxx-item-content">
      <view class="top">
        <view class="cname-box">
          <view class="cname">{{ itemList.vehicleNo || '' }}</view>
          <view class="cname-fu-box">
            <view class="cname-fu">
              <view class="gs">{{ itemList.customerName || '' }}</view>
            </view>
            <view class="line"></view>
            <view class="cname-fu">
              <view class="mz">{{ itemList.proName || '' }}</view>
            </view>
          </view>
        </view>
        <view class="status" :class="{
            'orange-type': itemList.waybillStatus === 0,
            'blue-type': itemList.waybillStatus === 1,
            'purple-type': itemList.waybillStatus === 2,
            'cyan-type': itemList.waybillStatus === 3,
            'red-orange-type': itemList.waybillStatus === 4,
            'red-purple-type': itemList.waybillStatus === 5,
            'green-type': itemList.waybillStatus === 6,
            'red-type': itemList.waybillStatus === 7,
            'gray-type': itemList.waybillStatus===8
          }">
          {{ statusName[itemList.waybillStatus] }}</view>
      </view>
      <view class="bottom" style="margin-top: 20rpx" v-if="orgNameShow">
        <view class="items">
          <text class="til">所属组织</text>
          <text class="val">{{ itemList.organizationName || '' }}</text>
        </view>
      </view>
      <view class="bottom" :style=" orgNameShow ? '' : 'margin-top: 20rpx;'">
        <view class="items">
          <text class="til">承运单位</text>
          <text class="val">{{ itemList.cusTransport || '' }}</text>
        </view>
      </view>
      <view class="bottom">
        <view class="items">
          <text class="til">姓名</text>
          <text class="val">{{ itemList.driverName || '' }}</text>
        </view>
      </view>
      <view class="bottom">
        <view class="items">
          <text class="til">电话</text>
          <text class="val">{{ itemList.driverMobile || '' }}</text>
        </view>
      </view>
      <view class="bottom">
        <view class="items">
          <text class="til">接单时间</text>
          <text class="val">{{itemList.createTime ? getDateFormatString(itemList.createTime): '-'}}</text>
        </view>
      </view>
      <view class="bottom" style="padding-bottom:10px">
        <view class="items">
          <text class="til">重磅时间</text>
          <text class="val">{{itemList.grossTime ? getDateFormatString(itemList.grossTime) : '-'}}</text>
        </view>
      </view>
      <view class="bottom weight-wrap">
        <view class="label">矿发</view>
        <view>
          <text class="text">毛重</text>
          <view class="value">{{itemList.grossWeight || '-'}}</view>
        </view>
        <view>
          <text class="text">皮重</text>
          <view class="value">{{itemList.netWeight || '-'}}</view>
        </view>
        <view>
          <text class="text">净重</text>
          <view class="value">{{itemList.totalWeight || '-'}}</view>
        </view>
      </view>
      <view class="bottom price-wrap">
        <view>
          <text class="text">单价</text>
          <view class="value">{{itemList.endPrice != null || itemList.endPrice != undefined ? itemList.endPrice : '-'}}
          </view>
        </view>
        <view>
          <text class="text">总价</text>
          <view class="value">{{itemList.priceTotal != null || itemList.priceTotal != undefined ? itemList.priceTotal :
            '-'}}</view>
        </view>
      </view>
      <view class="button-wrapper">
        <view class="bottom-btn">
          <button v-if="itemList.cancelBtn && confirmCancel" class="cancelBtn small" size="mini"
            @click.stop="cancel(itemList)">取消</button>
          <button v-if="itemList.waybillStatus===0 && confirmAudit" class="cancelBtn small" size="mini"
            @click.stop="openExamine(itemList)">确认审核</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { getDateFormat } from '@/utils/common.js';
  export default {
    name: 'sale-waybill',
    props: {
      itemList: {
        type: Object,
        default: {}
      },
      confirmAudit: {
        type: Boolean,
        default: false
      },
      orgNameShow: {
        type: Boolean,
        default: false
      },
      confirmCancel: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      getDateFormatString() {
        return (value) => {
          return getDateFormat(value)
        }
      }
    },
    data() {
      return {
        statusName: {
          0: '待审核',
          1: '待入场',
          2: '待录皮',
          3: '待装煤',
          4: '待称毛',
          5: '待出厂',
          6: '已完成',
          7: '已作废',
          8: '已终止'
        }
      };
    },
    methods: {
      goToDetail(item) {
        this.$emit('goToDetail', item);
      },
      cancel(item) {
        uni.showModal({
          title: '取消',
          content: '您确认取消运单吗？',
          cancelText: '取消',
          confirmText: '确定',
          success: (res) => {
            if (res.confirm) {
              const data = { id: item.id }
              if ([1, 2, 3, 4].includes(item.waybillStatus)) {
                data['status'] = 8
              }
              this.$emit('cancelWaybill', data);
            }
          }
        })
      },
      openExamine(item) {
        this.$emit('confirmExamine', item);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .button-wrapper {
    display: flex;
    justify-content: flex-end;
  }

  .bottom-btn {
    text-align: right;
    border-top: 1px solid #e8e7e7;
    padding-top: 10px;
    margin-left: 10px;
    width: 100%;

    button {
      margin-left: 10rpx;
    }
  }

  .weight-row {
    display: flex;
    border-radius: 4px;
    margin: 10px 0;
    background: #f1f2f5;

    >view {
      flex: 1;
      height: 40px;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;

      >view {
        font-size: 12px;
        color: #999999;
      }

      >text {
        margin-top: 2px;
        font-size: 14px;
        font-weight: 700;
      }
    }
  }

  .price-row {
    display: flex;
    margin-bottom: 10px;

    >view {
      flex: 1;
      height: 46px;
      display: flex;
      align-items: center;
      background: #f1f2f5;
      flex-direction: column;
      justify-content: center;

      >view {
        font-size: 12px;
        color: #999999;
      }

      >text {
        margin-top: 4px;
        font-size: 16px;
        font-weight: 700;
      }
    }
  }

  .weight-wrap {
    display: flex;
    margin-bottom: 6px;

    .label {
      width: 48px;
      height: 40px;
      line-height: 40px;
      color: #409EFE;
      text-align: center;
      background-color: #D9ECFF;
      border-radius: 4px 0px 0px 4px;
    }

    >view:last-child {
      border-radius: 0px 4px 4px 0px;
    }

    >view:not(.label) {
      flex: 1;
      height: 40px;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      background-color: #f1f2f5;

      text {
        color: #999999;
      }

      view {
        color: #333333;
        font-size: 16px;
        font-weight: 700;
      }
    }
  }

  .price-wrap {
    display: flex;
    margin-bottom: 10px;

    >view+view {
      margin-left: 10px;
    }

    >view {
      flex: 1;
      height: 46px;
      display: flex;
      border-radius: 4px;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      background-color: #f1f2f5;

      text {
        color: #999999;
      }

      view {
        margin-top: 4px;
        color: #333333;
        font-size: 16px;
        font-weight: 700;
      }
    }
  }


  .phxx-item,
  .statics-item {
    padding: 30rpx;
    box-sizing: border-box;
    margin: 0 auto 20rpx;
    border-radius: 20rpx;
    color: #000;
    background: linear-gradient(180deg, #deeeff, #ffffff 21%);

    .phxx-item-content {
      width: 644rpx;

      .top {
        width: 100%;
        border-bottom: 1rpx solid #e6e6e6;
        position: relative;
        padding: 0 0 20rpx 0;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .cname-box {
          font-size: 26.66rpx;

          .cname-fu-box {
            display: flex;
            justify-content: flex-start;
            height: 36rpx;
            line-height: 36rpx;

            .line {
              width: 2rpx;
              height: 28rpx;
              background-color: #666;
              position: relative;
              top: 6rpx;
              margin: 0 9rpx;
            }
          }
        }

        .cname {
          color: #333;
          font-size: 32rpx;
          font-weight: 700;

          .ctitle {
            display: inline-block;
          }
        }

        .cname-fu {
          color: #333;

          .ctitle {
            display: inline-block;
          }
        }

        .status {
          font-size: 24.88rpx;
          padding: 0 20rpx;
          text-align: center;
          border-radius: 10rpx;
          display: block;
          height: 29px;
          line-height: 29px;
        }
      }

      .center {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 20rpx 5rpx;

        .space-box {
          display: inline-block;
          margin-left: 20rpx;
          height: 1rpx;
          width: 1rpx;
        }

        .gs {
          margin-right: 30rpx;
          font-size: 28.44rpx;
        }

        .gs,
        .mz,
        .location {
          overflow: hidden;
          text-overflow: ellipsis;
          width: 50%;
        }
      }

      .bottom {
        padding: 10rpx 0 0 0;

        >.items {
          padding-bottom: 10rpx;
        }

        .til {
          width: 176rpx;
          display: inline-block;
          color: #666;
        }

        .val {
          margin-left: 20rpx;
        }

        .img-box {
          position: relative;
          left: 193rpx;
          top: -30rpx;

          image {
            width: 300rpx;
            height: 200rpx;
          }
        }
      }
    }

    .phxx-item-content.more-width {
      .bottom {
        .til {
          width: 186rpx;
        }
      }
    }

    .btn {
      margin-top: 20rpx;
      display: flex;
      border-top: 1px solid #e8e7e7;
      padding-top: 10px;
      justify-content: flex-end;
      align-items: flex-end;

      .mini-btn {
        height: 30px !important;
        line-height: 30px !important;
        padding: 0 28rpx;
        margin: 0 5rpx 0 5rpx;
      }
    }
  }
</style>